<script setup lang="ts">

import {MailPlusIcon, SendIcon} from "lucide-vue-next";
import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Button} from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from "@/components/ui/dialog";
import {Textarea} from "@/components/ui/textarea";
import {Input} from "@/components/ui/input";
import {toTypedSchema} from "@vee-validate/zod";
import * as z from "zod";
import {useForm} from "vee-validate";
import {toast} from "vue-sonner";
import {h} from "vue";
import {Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";

const formSchema = toTypedSchema(z.object({
  email: z.string().min(2).max(50),
  role: z.string().min(2).max(50),
  description: z.string().min(0).max(200),
}))

const {isFieldDirty, handleSubmit} = useForm({
  validationSchema: formSchema,
})

const onSubmit = handleSubmit((values) => {
  toast('Invite has been send.', {
    title: 'You submitted the following values:',
    description: h('pre', {class: 'mt-2 w-[320px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(values, null, 2))),
  })
  // TODO: do something with the values
})

</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button
          variant='outline'
          class='space-x-1'>
        <span>Invite User</span>
        <Component :is="MailPlusIcon"/>
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-[425px]">
      <DialogHeader>
        <DialogTitle class="flex space-x-2">
          <Component :is="MailPlusIcon"/>
          <span>Invite User</span>
        </DialogTitle>
        <DialogDescription>
          Invite new user to join your team by sending them an email invitation.
          Assign a role to define their access level.
        </DialogDescription>
      </DialogHeader>

      <form class="space-y-6" @submit="onSubmit" id="inviteUserForm">
        <FormField v-slot="{ componentField }" name="email" :validate-on-blur="!isFieldDirty">
          <FormItem v-auto-animate>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="text" v-bind="componentField" placeholder="eg: m@example.com"/>
            </FormControl>
            <FormMessage/>
          </FormItem>
        </FormField>
        <FormField v-slot="{ componentField }" name="role" :validate-on-blur="!isFieldDirty">
          <FormItem v-auto-animate>
            <FormLabel>Role</FormLabel>
            <Select v-bind="componentField">
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Select a role"/>
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="superadmin">
                    Superadmin
                  </SelectItem>
                  <SelectItem value="admin">
                    Admin
                  </SelectItem>
                  <SelectItem value="manager">
                    Manager
                  </SelectItem>
                  <SelectItem value="user">
                    User
                  </SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <FormMessage/>
          </FormItem>
        </FormField>
        <FormField v-slot="{ componentField }" name="description" :validate-on-blur="!isFieldDirty">
          <FormItem v-auto-animate>
            <FormLabel>Description(optional)</FormLabel>
            <FormControl>
              <Textarea type="text" v-bind="componentField"/>
            </FormControl>
            <FormMessage/>
          </FormItem>
        </FormField>
      </form>
      <DialogFooter>
        <DialogTrigger as-child>
          <Button variant="outline">
            <span>Cancel</span>
          </Button>
        </DialogTrigger>
        <Button type="submit" form="inviteUserForm">
          <span>Invite</span>
          <Component :is="SendIcon"/>
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<style scoped>

</style>
